<template>
    <div>
        <el-dialog v-model="dialogVisible" width="500" :before-close="handleClose" :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <div class="main">Lose</div>
            <div class="main">
                {{ $store.state.Pk.loseScore }}
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="ret">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="winDialogVisible" width="500" :before-close="handleClose" :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <div class="main">Win</div>
            <div class="main">
                {{ $store.state.Pk.winScore }}
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="ret">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="allDialogVisible" width="500" :before-close="handleClose" :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <div class="main">平局</div>
            <div class="main">
                0
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="ret">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    name: "winShowComponents",
    setup() {
        const store = useStore();
        let dialogVisible = ref(false);
        let winDialogVisible = ref(false);
        let allDialogVisible = ref(false);
        let winScore = ref("");
        let loseScore = ref("");

        let show = () => {
            if (store.state.Pk.loser == "all") {
                allDialogVisible.value = true;
                return;
            } 
            else if (store.state.Pk.loser == store.state.User.id) {
                dialogVisible.value = true;
            }
            else winDialogVisible.value = true;
        }
        let ret = () => {
            dialogVisible.value = false;
            winDialogVisible.value = false;
            allDialogVisible.value = false;
            store.commit("clear");
            // context.emit("close");
            // context.emit("open");
        }
        let updateScore = () => {
            // winScore.value = data.winScore;
            // loseScore.value = data.loseScore;
        }
        return {
            show,
            ret,
            updateScore,

            winScore,
            loseScore,
            dialogVisible,
            winDialogVisible,
            allDialogVisible,
        }
    }
}

</script>

<style scoped>
.main {
    font-size: 40px;
    text-shadow: 5px 5px 5px black, 0px 0px 2px black;
    font-style: italic;
    color: white;
    text-align: center;
    width: 97%;
}

:deep(.el-dialog) {
    background-color: rgba(132, 132, 132, 0.624)
}
</style>